<template>
  <div class="select_class">
    <header>
      <a @click="$api.goBack()" class="back"></a>
      <span>{{tabtitle}}</span>
      <a @click="addStudent" v-if="!markType&&markType!=0&&useInfo.tsMenuList[1].voOperate.editObj" class="add">添加</a>
      <a @click="openClassPicker" v-if="markType||markType==0" class="add">{{tureSelectClass}}</a>
    </header>
     <mt-navbar v-model="selected">
            <mt-tab-item id="1">{{tabDataHeader[0]}}</mt-tab-item>
            <mt-tab-item v-if="markType!=1" id="2">{{tabDataHeader[1]}}</mt-tab-item>
            <mt-tab-item id="3">{{tabDataHeader[2]}}</mt-tab-item>
     </mt-navbar>

    <!-- tab-container -->
    <mt-tab-container v-model="selected">
        <mt-tab-container-item id="1">
        <slot name="select1"></slot> 
      </mt-tab-container-item>
        <mt-tab-container-item id="2">
        <slot name="select2"></slot> 
      </mt-tab-container-item>
        <mt-tab-container-item id="3">
        <slot name="select3"></slot> 
      </mt-tab-container-item>
    </mt-tab-container>
    <mt-popup style="background:white;width:100%;"
    v-model="popupClass"
    position="bottom">
    <div class="picker-toolbar" style="border-bottom:1px solid #f2f2f2">
        <span @click="SureOrCanelSelect(1)" class="mint-datetime-action mint-datetime-cancel">取消</span> 
        <span @click="SureOrCanelSelect()" class="mint-datetime-action mint-datetime-confirm">确定</span>
    </div>
    <mt-picker :slots="slots"  @change="ChangeClass"></mt-picker>
    </mt-popup>
  </div>

</template>
<script>
    export default {
        data() {
            return {
                selected: '1',
                useInfo: {},
                selectClass: '', //过度用班级无实际作用
                tureSelectClass: '班级过滤', //选中的班级名字,用于匹配班级id
                popupClass: false,
                classId: '', //存储班级ID
                slots: [{
                    flex: 1,
                    values: [],
                    className: 'slot1',
                    textAlign: 'center'
                }],
            }
        },
        props: ['tabtitle', 'tabDataHeader', 'markType'],
        watch: {
            selected(val) {
                this.$emit('tabSelect', val);
            },
            classId(val) { //传班级ID给父节点
                this.$emit('classSelect', val);
            }
        },
        methods: {
            SureOrCanelSelect(cancel) { //班级选择器 确定取消点击事件
                if (!cancel) { //点击确定,这里做点什么
                    this.classlist.forEach(element => {
                        if (element.className == this.selectClass) {
                            this.classId = element.classId
                            this.tureSelectClass = this.selectClass;
                        }
                    })

                }
                this.popupClass = false;
            },
            getClassList() { //获取班级列表
                var url = "/class/classList"
                var type = sessionStorage.getItem('studentListType');
                var params = {
                    schoolId: this.useInfo.schoolId,
                }
                if (type == '4') {
                    params.classType = 1; //(0:托管班,1:培训班)'
                } else {
                    params.classType = 0; //
                }

                this.$api.post(url, params, (data) => {

                    this.classlist = data.info
                        // this.classId = data.info[0].classId
                        // sessionStorage.setItem('classId', this.classId);
                    this.classlist.forEach(element => {
                        this.slots[0].values.push(element.className);
                    });
                })
            },
            ChangeClass(picker, Class) {
                this.selectClass = Class[0]
            },
            openClassPicker() { //打开班级选择器
                this.popupClass = true;
            },
            addStudent() { //继续加入学生
                var studentType = {
                    header: '加入学生',
                    type: 1,
                }
                sessionStorage.setItem('studentType', JSON.stringify(studentType));
                this.$router.push({
                    path: 'g14',
                });
            },
            getUserInfo() {
                this.useInfo = JSON.parse(sessionStorage.getItem('useInfo'));
            }
        },
        created() {
            this.getUserInfo();
            this.getClassList(); //获取班级列表
        }
    }
</script>
<style scoped>

</style>